<template>
  <div class="home-container">

    <Sidebar
        :isCollapsed="isSidebarCollapsed"
    />
    <div class="content-wrapper">
      <Header :isCollapsed="isSidebarCollapsed" @toggleSidebar="toggleSidebarCollapse" />
      <div class="main-content">
        <!-- 判断路由的 meta 信息，是否需要显示返回按钮 -->
        <BaseButton
            v-if="showBackButton"
            variant="secondary"
            size="medium"
            @click="goBack"
            style="margin-bottom: 5px"
        >
          <font-awesome-icon :icon="['fas', 'arrow-left']" />
        </BaseButton>
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Header from '../components/Header.vue';
import Sidebar from '../components/Sidebar.vue';
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import BaseButton from '@/components/BaseButton.vue'

const route = useRoute()
const router = useRouter()

// 获取当前路由的 meta 信息，判断是否需要显示返回按钮
const showBackButton = computed(() => {
  return route.meta?.showBackButton
})

// 返回上一页
const goBack = () => {
  router.go(-1) // 返回上一页
}

const isSidebarCollapsed = ref(false);

const toggleSidebarCollapse = () => {
  console.log('toggleSidebarCollapse 方法被调用');
  isSidebarCollapsed.value = !isSidebarCollapsed.value;
};
</script>

<style scoped>
:root {
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 80px;
  --header-height: 60px;
  --spacing-large: 16px;
  --card-background: #fff;
  --transition-speed: 0.3s;
  --background-color: #f0f2f5; /* 您可以根据需要调整背景色 */
}

.home-container
{
  display: flex;
  flex-direction: row;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.main-content {
  flex: 1;
  background:
      linear-gradient(to bottom, transparent, #fff 260px),
      radial-gradient(20% 150px at 70% 230px, rgba(0, 210, 255, 0.2), transparent),
      radial-gradient(40% 180px at 80% 50px, rgba(249, 167, 176, 0.3), transparent),
      radial-gradient(50% 300px at 90% 100px, rgba(212, 230, 241, 0.8), transparent),
      radial-gradient(20% 150px at 0px 0px, rgba(162, 213, 239, 0.5), transparent),
      radial-gradient(30% 200px at 100px 50px, rgba(249, 167, 176, 0.5), transparent),
      #FFF0F5;
  transition: margin-left var(--transition-speed) ease;
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

}
</style>

